<template>
  <div class="medical">
    <van-nav-bar title="快速问诊" left-arrow @click="back" />
    <img
      src="../../image/04.png"
      alt=""
      style="margin-top: 0.15rem; margin-left: 0.1rem"
    />
    <van-rolling-text
      class="my-rolling-text"
      :height="54"
      :start-num="12345"
      :target-num="54321"
    />
    <div class="div">
      <img
        src="../../image/05.png"
        alt=""
        style="width: 2.3rem; height: 1.5rem"
      />
      <span>当前在线接诊医生人数</span>
      <van-swipe
        class="swiper"
        vertical
        autoplay="3000"
        :show-indicators="false"
      >
        <van-swipe-item>
          <p>黄铁群 主任医师</p>
          <p style="font-size: 0.13rem; margin-top: 0.02rem; color: #ccc">
            中日友好医院 呼吸内科
          </p>
        </van-swipe-item>
        <van-swipe-item>
          <p>杨隽昀 主任医师</p>
          <p style="font-size: 0.13rem; margin-top: 0.02rem; color: #ccc">
            北京协和医院 妇科
          </p>
        </van-swipe-item>
        <van-swipe-item>
          <p>张光华 主任医师</p>
          <p style="font-size: 0.13rem; margin-top: 0.02rem; color: #ccc">
            湖南省人民医院 儿科
          </p>
        </van-swipe-item>
      </van-swipe>
      <van-swipe
        class="sw"
        autoplay="3000"
        :show-indicators="false"
      >
        <van-swipe-item>
          <img src="../../image/40.png" alt="" style="width: 100%;height: 100%;">
        </van-swipe-item>
        <van-swipe-item>
          <img src="../../image/41.png" alt="" style="width: 100%;height: 100%;">
        </van-swipe-item>
        <van-swipe-item>
          <img src="../../image/42.png" alt="" style="width: 100%;height: 100%;">
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="consult">
      <div class="consult1">
        <img src="../../image/06.png" alt="" />
        <h4>电话问诊</h4>
        <button>三甲</button>
        <p>一对一电话沟通，好评率99%</p>
        <b style="color: red">￥29</b>
        <button class="enquire">立即咨询</button>
      </div>
      <div class="consult2">
        <h4>图文问诊</h4>
        <button>三甲</button>
        <p>图文、文字、语音不限次咨询</p>
        <b style="color: red">￥19</b>
        <button class="enquire">立即咨询</button>
      </div>
      <div class="consult3">
        <h4>名院专家 实时问诊</h4>
        <p>平均接诊时长20分钟</p>
        <button class="enquire">立即咨询</button>
        <div class="hospital">
          <span class="span-left"></span>
          <span class="span-right"></span>
          <h4>常荐医院</h4>
          <span
            style="
              position: absolute;
              top: 0.4rem;
              left: 0.15rem;
              background: #fcfcfc;
              font-size: 0.13rem;
              color: blue;
            "
            >复旦大学附属肿瘤医院</span
          >
          <span
            style="
              position: absolute;
              top: 0.4rem;
              left: 1.6rem;
              background: #fcfcfc;
              font-size: 0.13rem;
              color: orange;
            "
            >❀复旦大学附属中山医院</span
          >
          <span
            style="
              position: absolute;
              top: 0.65rem;
              left: 0.15rem;
              background: #fcfcfc;
              font-size: 0.13rem;
              color: blue;
            "
            >上海交通大学医学院附属金医院</span
          >
          <span
            style="
              position: absolute;
              top: 0.65rem;
              left: 2.1rem;
              background: #fcfcfc;
              font-size: 0.13rem;
              color: blue;
            "
            >上海市肺科医院</span
          >
          <span
            style="
              position: absolute;
              top: 0.9rem;
              left: 0.15rem;
              background: #fcfcfc;
              font-size: 0.13rem;
              color: orange;
            "
            >❀复旦大学附属华山医院</span
          >
          <span
            style="
              position: absolute;
              top: 1.15rem;
              left: 0.15rem;
              background: #fcfcfc;
              font-size: 0.13rem;
              color: orange;
            "
            >❀上海交通大学医学院附属第九人民医院</span
          >
        </div>
      </div>
      <div class="img1">
        <img
          src="../../image/07.png"
          alt=""
          style="width: 100%; height: 100%"
        />
      </div>
      <div class="img2">
        <img
          src="../../image/08.png"
          alt=""
          style="width: 100%; height: 100%"
        />
      </div>
      <div class="img3">
        <img
          src="../../image/09.png"
          alt=""
          style="width: 100%; height: 100%"
        />
      </div>
      <div class="img4">
        <img
          src="../../image/10.png"
          alt=""
          style="width: 100%; height: 100%"
        />
      </div>
      <div class="img5">
        <img
          src="../../image/11.png"
          alt=""
          style="width: 100%; height: 100%"
        />
        <button>查看完整问诊 ></button>
      </div>
      <div class="img6">
        <img
          src="../../image/12.png"
          alt=""
          style="width: 100%; height: 100%"
        />
      </div>
      <div class="img7">
        <img
          src="../../image/13.png"
          alt=""
          style="width: 100%; height: 100%"
        />
        <button>查看完整问诊 ></button>
      </div>
      <div class="img8">
        <img
          src="../../image/14.png"
          alt=""
          style="width: 100%; height: 100%"
        />
      </div>
      <div class="img9">
        <img
          src="../../image/15.png"
          alt=""
          style="width: 100%; height: 100%"
        />
      </div>
      <div class="bottom">
        <p style="margin-left: 0.1rem; padding-top: 0.1rem">
          已有<b>3,027,000</b>患者获得帮助
        </p>
        <van-swipe
          class="swipe"
          vertical
          autoplay="3000"
          :show-indicators="false"
        >
          <van-swipe-item>
            <p
              style="
                float: left;
                margin-top: 0.1rem;
                margin-left: 0.3rem;
                font-size: 0.15rem;
              "
            >
              北京 的患者沙**购买了<b>￥15</b
              ><span class="span-1">视频问诊</span
              ><span class="span-2">1分钟前</span>
            </p>
            <p
              style="
                float: left;
                margin-top: 0.12rem;
                margin-left: 0.3rem;
                font-size: 0.15rem;
              "
            >
              上海 的患者沈*购买了<b>￥10</b>
              <span class="span-3">图文问诊</span
              ><span class="span-4">1分钟前</span>
            </p>
          </van-swipe-item>
          <van-swipe-item>
            <p
              style="
                float: left;
                margin-top: 0.1rem;
                margin-left: 0.3rem;
                font-size: 0.15rem;
              "
            >
              上海 的患者侯**购买了<b>￥19</b>
              <span class="span-1">图文问诊</span
              ><span class="span-2">2分钟前</span>
            </p>
            <p
              style="
                float: left;
                margin-top: 0.12rem;
                margin-left: 0.3rem;
                font-size: 0.15rem;
              "
            >
              上海 的患者王*购买了<b>￥10</b>
              <span class="span-3">图文问诊</span
              ><span class="span-4">3分钟前</span>
            </p>
          </van-swipe-item>
          <van-swipe-item>
            <p
              style="
                float: left;
                margin-top: 0.1rem;
                margin-left: 0.3rem;
                font-size: 0.15rem;
              "
            >
              上海 的患者侯**购买了<b>￥19</b>
              <span class="span-1">视频问诊</span
              ><span class="span-2">2分钟前</span>
            </p>
            <p
              style="
                float: left;
                margin-top: 0.12rem;
                margin-left: 0.3rem;
                font-size: 0.15rem;
              "
            >
              上海的患者王*购买了<b>￥10</b> <span class="span-3">图文问诊</span
              ><span class="span-4">3分钟前</span>
            </p>
          </van-swipe-item>
        </van-swipe>
      </div>
      <button class="phone">电话问诊</button>

      <button class="photo">图文问诊</button>
    </div>
    <div class="fixed">
      <br />
      我的
      <br />
      问诊
    </div>
    <img
      src="../../image/16.png"
      alt=""
      style="position: absolute; bottom: -39.7rem; left: 1.4rem"
    />
    <img
      src="../../image/16.png"
      alt=""
      style="position: absolute; bottom: -39.7rem; left: 3.3rem"
    />
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter();
const back = () => {
  router.push("/");
};
</script>

<style scoped>
.medical {
  width: 100%;
  height: 100%;
  position: relative;
}
.div {
  width: 100%;
  height: 3rem;
  position: relative;
}
span {
  position: absolute;
  top: 1.7rem;
  left: 0.4rem;
  color: #ccc;
}
.swiper {
  width: 2rem;
  height: 0.5rem;
  position: absolute;
  top: 2.5rem;
  right: -.0rem;
  text-align: center;
  list-style: none;
}
.swiper p span {
  width: 2.3rem;
  height: 1.2rem;
}
.my-rolling-text {
  --van-rolling-text-background: #1989fa;
  --van-rolling-text-color: white;
  --van-rolling-text-font-size: 0.24rem;
  --van-rolling-text-gap: 0.05rem;
  --van-rolling-text-item-border-radius: 0.1rem;
  --van-rolling-text-item-width: 0.3rem;
  --van-rolling-text-item-height: 0.3rem;
  position: absolute;
  top: 3rem;
  left: 0.35rem;
}
.consult {
  width: 100%;
  height: 3rem;
  background: #fcfcfc;
}
.consult1 {
  width: 3.5rem;
  height: 0.8rem;
  border: 0.01rem solid #ccc;
  margin-left: 0.1rem;
  position: relative;
}
.consult1 h4 {
  float: left;
  margin-top: 0.18rem;
  margin-left: 0.25rem;
}
.consult1 img {
  position: absolute;
  left: 0;
  top: -0.15rem;
}
.consult1 button {
  float: left;
  margin-top: 0.2rem;
  background: #fff;
  border: 0.01rem solid red;
  margin-left: 0.02rem;
  font-size: 0.12rem;
  color: red;
}
.consult1 p {
  position: absolute;
  left: 0.27rem;
  top: 0.5rem;
  font-size: 0.13rem;
}
.consult1 b {
  float: right;
  margin-right: 0.1rem;
  margin-top: 0.13rem;
}
.consult1 .enquire {
  width: 1rem;
  height: 0.3rem;
  background: blue;
  color: #fff;
  border: none;
  border-radius: 0.03rem;
  font-weight: bold;
  position: absolute;
  right: 0.1rem;
  top: 0.19rem;
}
.consult2 {
  width: 3.5rem;
  height: 0.8rem;
  border: 0.01rem solid #ccc;
  margin-left: 0.1rem;
  margin-top: 0.1rem;
  position: relative;
}
.consult2 h4 {
  float: left;
  margin-top: 0.18rem;
  margin-left: 0.25rem;
}
.consult2 button {
  float: left;
  margin-top: 0.2rem;
  background: #fff;
  border: 0.01rem solid red;
  margin-left: 0.02rem;
  font-size: 0.12rem;
  color: red;
}
.consult2 p {
  position: absolute;
  left: 0.27rem;
  top: 0.5rem;
  font-size: 0.13rem;
}
.consult2 b {
  float: right;
  margin-right: 0.1rem;
  margin-top: 0.13rem;
}
.consult2 .enquire {
  width: 1rem;
  height: 0.3rem;
  background: blue;
  color: #fff;
  border: none;
  border-radius: 0.03rem;
  font-weight: bold;
  position: absolute;
  right: 0.1rem;
  top: 0.19rem;
}
.consult3 {
  width: 3.5rem;
  height: 2.5rem;
  border: 0.01rem solid #ccc;
  margin-left: 0.1rem;
  margin-top: 0.1rem;
  position: relative;
}
.consult3 h4 {
  float: left;
  margin-top: 0.18rem;
  margin-left: 0.25rem;
}
.consult3 p {
  position: absolute;
  left: 0.27rem;
  top: 0.5rem;
  font-size: 0.13rem;
}
.consult3 .enquire {
  width: 1rem;
  height: 0.3rem;
  background: blue;
  color: #fff;
  border: none;
  border-radius: 0.03rem;
  font-weight: bold;
  position: absolute;
  right: 0.1rem;
  top: 0.35rem;
}
.hospital {
  width: 3.15rem;
  height: 1.5rem;
  background: #ccc;
  margin-left: 0.25rem;
  margin-top: 0.8rem;
  position: relative;
}
.hospital .span-left {
  width: 0.7rem;
  height: 0.2rem;
  border-bottom: 0.01rem solid #000;
  position: absolute;
  top: 0;
  left: 0.12rem;
  z-index: 1;
}
.hospital .span-right {
  width: 0.7rem;
  height: 0.2rem;
  border-bottom: 0.01rem solid #000;
  position: absolute;
  left: 2.34rem;
  top: 0;
  z-index: 1;
}
.hospital h4 {
  position: absolute;
  top: -0.08rem;
  left: 1rem;
}
.fixed {
  width: 0.8rem;
  text-align: center;
  align-items: center;
  line-height: 0.2rem;
  height: 0.8rem;
  background: blue;
  color: #fff;
  font-weight: bold;
  border-radius: 50%;
  position: fixed;
  right: 0;
  top: 5rem;
}
.img1 {
  width: 100%;
  height: 2.5rem;
  margin-top: 0.15rem;
}
.img2 {
  width: 100%;
  height: 4rem;
  margin-top: 0.1rem;
}
.img3 {
  width: 100%;
  height: 4rem;
  margin-top: 0.1rem;
}
.img4 {
  width: 100%;
  height: 5rem;
  margin-top: 0.1rem;
}
.img5 {
  width: 100%;
  height: 4.5rem;
  border-bottom: 0.05rem dotted #ccc;
  margin-top: 0.1rem;
  position: relative;
}
.img5 button {
  width: 1.5rem;
  height: 0.4rem;
  background: #fff;
  border: 0.01rem solid blue;
  color: blue;
  border-radius: 1rem;
  position: absolute;
  bottom: 0;
  left: 1.1rem;
}
.img6 {
  width: 100%;
  height: 3rem;
  margin-top: 0.1rem;
}
.img7 {
  width: 100%;
  height: 3.5rem;
  margin-top: 0.1rem;
  position: relative;
}
.img7 button {
  width: 1.5rem;
  height: 0.4rem;
  background: #fff;
  border: 0.01rem solid blue;
  color: blue;
  border-radius: 1rem;
  position: absolute;
  bottom: -0.09rem;
  left: 1.1rem;
}
.img8 {
  width: 100%;
  height: 6rem;
  margin-top: 0.15rem;
}
.img9 {
  width: 100%;
  height: 3rem;
  margin-top: 0.1rem;
}
.bottom {
  width: 100%;
  height: 2rem;
  background: #f0f0f0;
  margin-top: 0.1rem;
}
.swipe {
  width: 3.5rem;
  height: 0.8rem;
  border: 0.01rem solid #ccc;
  margin-left: 0.1rem;
  margin-top: 0.2rem;
  text-align: center;
  position: relative;
}
.span-1 {
  color: blue;
  position: absolute;
  top: 0.1rem;
  left: 2.2rem;
}
.span-2 {
  color: #ccc;
  position: absolute;
  top: 0.1rem;
  left: 2.8rem;
}
.span-3 {
  color: blue;
  position: absolute;
  top: 0.4rem;
  left: 2.2rem;
}
.span-4 {
  color: #ccc;
  position: absolute;
  top: 0.4rem;
  left: 2.8rem;
}
.phone {
  width: 1.5rem;
  height: 0.4rem;
  background: blue;
  color: #fff;
  border-radius: 0.1rem;
  font-weight: bold;
  position: absolute;
  border: none;
  bottom: -40rem;
  left: 0.15rem;
}
.photo {
  width: 1.5rem;
  height: 0.4rem;
  background: blue;
  color: #fff;
  border-radius: 0.1rem;
  font-weight: bold;
  position: absolute;
  border: none;
  bottom: -40rem;
  right: 0.15rem;
}
.sw{
  width: 1.2rem;
  height: 2.3rem;
  background: blue;
  position: absolute;
  top: .15rem;
  right: .25rem;
}
</style>
